<template>
  <view class="settle">
    <u-cell-group class="mt-20">
      <u-cell-item
        title="姓名"
        :value="accountData.accountName"
        bg-color="#fffffF"
        :arrow="false"
      ></u-cell-item>
      <view class="" v-if="accountData.accountIdCard">
        <u-cell-item
          bg-color="#fffffF"
          title="身份证号"
          :value="
            accountData.accountIdCard.substring(0, 1) +
            '****************' +
            accountData.accountIdCard.substring(
              accountData.accountIdCard.length - 1
            )
          "
          :arrow="false"
        ></u-cell-item>
      </view>
      <u-cell-item
        title="银行卡位持卡本人银行卡"
        :arrow="false"
        bg-color="#F6F6F6"
        :border-bottom="false"
      ></u-cell-item>
    </u-cell-group>
    <view class="settle__upload">
      <DeliverFileUpload
        :maxCount="1"
        :width="700"
        @success="onSuccess"
        @remove="onRemove"
      ></DeliverFileUpload>
      <view class="tip"> 个人储蓄卡正面 </view>
    </view>
    <u-form ref="uForm" class="settle__form">
      <!-- <u-upload :action="action" :file-list="fileList"></u-upload> -->
      <u-form-item
        label="银行卡号"
        label-width="200rpx"
        class="ml-20 mr-20 mt-20"
        bg-color="white"
      >
        <u-input
          v-model="form.accountNo"
          type="number"
          placeholder="请输入银行卡号"
        />
      </u-form-item>
      <u-form-item label="开户行" label-width="200rpx" class="ml-20 mr-20">
        <u-input
          v-model="form.bankName"
          type="select"
          placeholder="请选择开户行"
          @click="goBank()"
        />
      </u-form-item>
      <u-form-item label="开户城市" label-width="200rpx" class="ml-20 mr-20">
        <u-input
          v-model="city"
          type="select"
          placeholder="请选择开户城市"
          @click="showCity = true"
        />
        <u-select
          v-model="showCity"
          mode="mutil-column-auto"
          :list="cityList"
          @confirm="confirm"
        ></u-select>
      </u-form-item>
      <u-form-item label="开户支行" label-width="200rpx" class="ml-20 mr-20">
        <u-input
          v-model="form.branchName"
          type="select"
          placeholder="请选择开户支行"
          @click="goBankBranch()"
        />
        <u-picker v-model="showSubBank" mode="region"></u-picker>
      </u-form-item>
      <u-form-item label="手机号" label-width="200rpx" class="ml-20 mr-20"
        ><u-input v-model="form.accountMobileNo" placeholder="银行预留手机号"
      /></u-form-item>
    </u-form>
    <u-button
      class="m-20"
      type="primary"
      :custom-style="customStyle"
      @click="submit()"
    >
      提交
    </u-button>
  </view>
</template>

<script>
import DeliverFileUpload from '@/components/DeliverFileUpload/DeliverFileUpload.vue';
export default {
  components: {
    DeliverFileUpload,
  },
  data() {
    return {
      accountData: {},
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
      },

      showBank: false,
      showCity: false,
      showSubBank: false,
      form: {
        accountImg: '',
        accountNo: '',
        accountName: '',
        bankName: '',
        bankCode: '',
        accountProvince: '',
        accountCity: '',
        accountArea: '',
        branchName: '',
        cnapsNo: '', //branchCode
        accountMobileNo: '',
      },
      cityList: [],
      city: '',

      fileList: [],
      ocrParam: {
        path: '',
        ocrType: 'BANK_CARD',
      },
    };
  },

  mounted() {
    this.querySetter();
    this.getCity();
  },
  methods: {
    onRemove(index) {
      this.fileList.splice(index, 1);
      this.form.accountImg = '';
      this.form.accountNo = '';
    },
    onSuccess(filePath) {
      this.fileList.push(filePath);
      //ocr识别
      this.getOcrRead(filePath);
    },
    getOcrRead(filePath) {
      const _that = this;
      _that.ocrParam.path = filePath;
      this.$zx.common_api.getOCRRead(this.ocrParam).then((data) => {
        console.log('getOCRRead----->164', data.result);
        if (data.result) {
          _that.form.accountNo = data.result.bank_card_number.replace(
            /\s+/g,
            ''
          );
        }
      });
    },
    querySetter() {
      const _that = this;
      this.$zx.user_api.querySetter().then((data) => {
        console.log('querySetter----->175', data);
        this.accountData = data;
        this.form.accountName = this.accountData.accountName;
      });
    },

    goBank() {
      const _that = this;
      uni.navigateTo({
        url: '/pages/bank/bankSelect',
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: (data) => {
            console.log('acceptDataFromOpenedPage----->188', data);
            _that.form.bankName = data.data.name;
            _that.form.bankCode = data.data.code;
          },
        },
        success: (res) => {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpenerPage', {
            data: 'data from starter page',
          });
        },
      });
    },
    goBankBranch() {
      const _that = this;
      if (!_that.form.bankCode) {
        uni.$zx.msg('请先选择开户行', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.accountProvince) {
        uni.$zx.msg('请先选择开户城市', {
          duration: 4000,
        });
        return;
      }
      uni.navigateTo({
        url:
          '/pages/bank/bankBranchSelect?province=' +
          _that.form.accountProvince +
          '&city=' +
          _that.form.accountCity +
          '&bankCode=' +
          _that.form.bankCode,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: (data) => {
            console.log('acceptDataFromOpenedPage----->227', data);
            _that.form.branchName = data.data.name;
            _that.form.cnapsNo = data.data.code;
          },
        },
        success: (res) => {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpenerPage', {
            data: 'data from starter page',
          });
        },
      });
    },
    getCity() {
      const _that = this;
      _that.$zx.common_api.listProvinceCityArea().then((data) => {
        // console.log("data=" + JSON.stringify(data))
        _that.cityList = data;
        _that.cityList.forEach(function (item, index_1, array) {
          _that.$set(item, 'value', item.code);
          _that.$set(item, 'label', item.name);

          if (item.hasChildren) {
            item.children.forEach(function (city, index_2, array) {
              _that.$set(city, 'value', city.code);
              _that.$set(city, 'label', city.name);
              if (city.hasChildren) {
                city.children.forEach(function (distinct, index_3, array) {
                  _that.$set(distinct, 'value', distinct.code);
                  _that.$set(distinct, 'label', distinct.name);
                });
              }
            });
          }
        });
      });
    },
    confirm(e) {
      let city = '';
      const _that = this;
      e.forEach(function (item, index, array) {
        city += item.label + ' ';
        if (index == 0) {
          _that.form.accountProvince = item.value;
        } else if (index == 1) {
          _that.form.accountCity = item.value;
        } else {
          _that.form.accountArea = item.value;
        }
      });
      this.city = city;
    },
    submit() {
      const _that = this;
      console.log('this.form----->281', this.form);
      if (_that.fileList.length == 0) {
        uni.$zx.msg('请上传银行照片', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.accountNo) {
        uni.$zx.msg('请输入银行卡号', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.bankCode) {
        uni.$zx.msg('请选择开户行', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.accountProvince) {
        uni.$zx.msg('请选择开户城市', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.branchName) {
        uni.$zx.msg('请选择开户支行', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.accountMobileNo) {
        uni.$zx.msg('请输入银行预留手机号', {
          duration: 4000,
        });
        return;
      }

      this.$zx.user_api.updateSetter(_that.form).then((data) => {
        const eventChannel = this.getOpenerEventChannel();
        // 通过监听上个页面的uni.navigateTo的events中定义的事件传递参数
        eventChannel.emit('acceptDataFromOpenedPage', {
          data: '1',
        });
        // 关闭当前页返回上一页并触发acceptDataFromOpenedPage事件
        uni.navigateBack({
          delta: 1,
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.settle {
  &__form {
    background-color: white;
  }

  &__upload {
    background-color: white;
    padding: 20rpx;
  }
}

.tip {
  text-align: center;
}
</style>
